<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文章列表</title>
  <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="js/jquery-1.12.4.min.js"></script>

</head>

<body>
<div class="container-fluid">
  <div class="common_title">
    用户信息修改
  </div>
  <div class="container-fluid common_con">
    <form class="form-horizontal article_form">
      <div class="form-group">
        <label for="username" class="col-sm-2 control-label">用户名称：</label>
        <div class="col-sm-4">
          <input type="text" class="form-control" id="username" name="username">
        </div>
      </div>
      <div class="form-group">
        <label for="nickname" class="col-sm-2 control-label">昵称：</label>
        <div class="col-sm-4">
          <input type="text" class="form-control" id="nickname" name="nickname">
        </div>
      </div>
      <div class="form-group">
        <label for="email" class="col-sm-2 control-label">邮箱：</label>
        <div class="col-sm-4">
          <input type="text" class="form-control" id="email" name="email">
        </div>
      </div>

      <div class="form-group">
        <label for="userPic" class="col-sm-2 control-label">用户图标：</label>
        <div class="col-sm-10">
          <img src="images/2.jpg" alt="" class="user_pic">
          <input type="file" id="userPic" name="userPic">
        </div>
      </div>

      <div class="form-group">
        <label for="password" class="col-sm-2 control-label">密码：</label>
        <div class="col-sm-4">
          <input type="password" class="form-control" id="password" name="password">
        </div>
      </div>


      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button class="btn btn-success" id="btnSubmit">修改</button>
        </div>
      </div>
    </form>
  </div>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script !src="">
  $(function () {
    //获取用户信息,反写到html中
    $.ajax({
      url: 'http://localhost:8080/admin/user/detail',
      method: 'get',
      dataType: 'json',
      data: {},
      // data: formData,
      success: function (data) {
        console.log('ajax结果', data);
        if (data.code === 200) {
          $('#username').val(data.data.username);
          $('#nickname').val(data.data.nickname);
          $('#email').val(data.data.email);
          $('#password').val(data.data.password);
          $('.user_pic').attr('src', data.data.userPic);
        } else {
          alert(data.msg)
        }
      }
    });
    //接下来需要修改信息了
    //切换头像
    $('body').on({
      change: function (e) {
        // 动态委派
        console.log('change', '#userPic');
        let file = e.target.files[0];
        let path = URL.createObjectURL(file);
        $('.user_pic').attr('src', path);
      }
    }, '#userPic');
    /*
      (1)给type类型为submit元素注册点击事件 ： 创建FromData对象就需要查找表单元素
      (2)给表单元素 注册 submit事件，
        a. 点击type为submit的元素会触发
        b. 这个事件中的this就是表单自身，可以不用查找表单元素直接创建FromData对象
      */
    $('#btnSubmit').on('click', function (e) {
      //禁用表单默认提交事件
      e.preventDefault();
      let formData = new FormData($('form')[0]);
      // formData.set('content', tinyMCE.activeEditor.getContent())
      $.ajax({
        url: 'http://localhost:8080/admin/user/edit',
        type: 'post',
        dataType: 'json',
        data: formData,
        //默认情况下，jq会自动设置post请求头为 application/x-www-form-urlencoded
        //上传文件，需要设置成  multipart/form-data. 设置成contentType:false
        //作用就是取消jq默认设置
        contentType: false,
        //这个属性是jq独有的属性 ： jq会自动将对象序列化成 key=value&key=value这种格式
        //而文件是不能序列化的，设置成false就是取消序列化
        processData: false,
        success: function (data) {
          console.log('发送文件结果', data);
          if (data.code === 200) {
            window.parent.load();

          } else {
            alert(data.msg)
          }
        }
      });
    });

  })
</script>
</body>

</html>